<div class="wrapper wrapper-content page-heading animated fadeInRight">
    <div class="row">
        <div class="col-lg-9">
            <div class="tabs-container">
                <ul class="nav nav-tabs" id="tab-list">
                    <li class="active" id="search-link"><a href="#search" data-toggle="tab" role="tab">Search</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="search">
                        <div class="panel-body">
                                <div class="ibox-title" style="border: none;"><h5 style="color: #00afef"><i>Search</i></h5>
                                </div>
                                <div class="ibox-content">
                                    <form class="form-horizontal" id="entity_form_search">
                                        <div class="form-group">
                                            <label class="col-lg-4 control-label">Entity Type</label>
                                            <div class="col-lg-5">
                                                <select class="form-control m-b chosen" name="entity_type_s">
                                                    <option value="ORG">Organization</option>
                                                    <option value="PERS">Person</option>
                                                    <option value="%">Both</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group organization">
                                            <label class="col-lg-4 control-label">Entity Name</label>
                                            <div class="col-lg-5">
                                                <input type="text" name="entity_name_s" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-4 control-label"></label>
                                            <div class="col-lg-5">
                                                <a id="clear_tbl_result" href="javascript:document.getElementById('entity_form_search').reset();" class="btn btn-warning btn-md pull-right m-t-n-xs clear-btn"> Clear</a>
                                                <button type="button" class="btn btn-primary btn-md pull-right m-t-n-xs search-btn btn-margin-right" id="search_entity"> Search</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <button id="add-form-tab" class="btn btn-success m-t-n-xs btn-md add-tab-btn" type="button"> Add</button>
                                <div class="ibox-content">
                                    <table class="footable table table-bordered table-compact" id="tbl_org" data-limit-navigation="5" data-page-size="50">
                                        <thead>
                                            <tr>
                                                <th data-sort-ignore="true">Entity Type</th>
                                                <th data-sort-ignore="false" data-type="alpha">Entity Name</th>
                                                <th data-sort-ignore="true">Tax Registraion Number</th>
                                                <th data-sort-ignore="true">Enable</th>
                                                <th data-sort-ignore="true" style="padding:8px;text-align:center;width:75px;">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="result_entity">
                                        </tbody>
                                        <tfoot >
                                            <tr >
                                                <td colspan="7" style='border: none !important;'>
                                                    <ul class="pagination pull-right"></ul>
                                                </td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div><!--END OF iBox-->
                    </div>
                </div>
            </div>
        </div>
    </div><!-- END of class row-->
</div>
<input type="hidden" id="count_add" value="0">
<input type="hidden" id="count_edit" value="0">
<input type="hidden" id="count_view" value="0">
<script>
    $(document).ready(function() {
        $('.chosen').chosen({width: '100%'});
        $('#clear_tbl_result').click(function(){
            $('select[name=entity_type_s]').val('ORG');
            $('.chosen').trigger('chosen:updated');
            $('#result_entity').html('');
        });
        $('#tab-list').on('click','#close-add-body',function(){
            var tabId = $(this).parents('li').children('a').attr('href');
            // $(this).parents('li').remove('li');
            // $(tabId).remove();
            // $('#tab-list a:first').tab('show');
            if(tabId == "#view"){
                $('#count_view').val('0');
                $(this).parents('li').remove('li');
                $(tabId).remove();
                $('#tab-list a:first').tab('show');
            }else{
                alert_cancel(tabId,$(this));
            }
        });

         $('#add-form-tab').click(function(){
            if($('#count_add').val() == 0){
                $('#tab-list').append('<li id="add-link"><a href="#add" role="tab" data-toggle="tab">Add<button id="addX" style="margin-left:10px;"class="close" type="button" title="Remove this page">×</button></a></li>');
                $('.tab-content').append('<div class="tab-pane" id="add"><div class="panel-body"><div id="add_data"><div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div></div></div></div>');
                $("#add_data").load("<?php echo base_url($this->session->userdata('forajax') . '/add_form/'); ?>");
                $('#add-link').show();
                $('#count_add').val('1');
            }
            $('#tab-list a[href="#add"]').tab('show');
        });

         $(document).on('click','.edit',function(){
            sessionStorage.entity_id_e = '';
            var entityid = $(this).closest('tr').children('#entity_id_v').text();
            sessionStorage.entity_id_e = entityid;
            if($('#count_edit').val() == 0){
                $('#tab-list').append('<li id="edit-link"><a href="#edit" role="tab" data-toggle="tab">Edit<button id="editX" style="margin-left:10px;"class="close" type="button" title="Remove this page">×</button></a></li>');
                $('.tab-content').append('<div class="tab-pane" id="edit"><div class="panel-body"><div id="edit_data"><div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div></div></div></div>');
                $('#edit-link').show();
                $('#count_edit').val('1');
            }
            $("#edit_data").html('<div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div>');
            $("#edit_data").load("<?php echo $this->session->userdata('forload') . '/edit_form/'; ?>" + entityid);
            $('#tab-list a[href="#edit"]').tab('show');
            $('.i-checks').iCheck('update');
         });

         $(document).on('click','.view',function(){
            sessionStorage.entity_id_v = '';
            var entityid = $(this).closest('tr').children('#entity_id_v').text();
            sessionStorage.entity_id_v = entityid;
            if($('#count_view').val() == 0){
                $('#tab-list').append('<li id="view-link"><a href="#view" role="tab" data-toggle="tab">View<button id="close-add-body" style="margin-left:10px;"class="close" type="button" title="Remove this page">×</button></a></li>');
                $('.tab-content').append('<div class="tab-pane" id="view"><div class="panel-body"><div id="view_data"><div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div></div></div></div>');
                $('#view-link').show();
                $('#count_view').val('1');
            }
            $("#view_data").html('<div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div>');
            $("#view_data").load("<?php echo $this->session->userdata('forload') . '/view_form/'; ?>" + entityid);
            $('#tab-list a[href="#view"]').tab('show');
         });

        $('#entity_form_search').keydown(function (e) {
          if (e.which == 13) {
            $('#entity_form_search #search_entity').trigger('click');
            return false;  
          }
        });

         $('#search_entity').click(function(e){
            e.preventDefault();
            $('#result_entity').html('');
            var entitytype = $('#entity_form_search select[name=entity_type_s]').val();
            var entityname = $('#entity_form_search input[name=entity_name_s]').val();
            $.ajax({
                url: "<?php echo base_url($this->session->userdata('forajax') . '/search'); ?>",
                method:'post',
                data: {'entity_type' : entitytype, 'entity_name' : entityname},
                dataType:'json',
                success: function (data) {
                    if(data == "No results found."){
                        notifymsg('success','<b>Success</b>: 0 Result Found.');
                    }else{
                        var tmp = '';
                        var checked = 'checked';
                        var count = 0;
                        $.each(data, function(i,item){
                            if(data[i].enable_flag == 'N'){
                                checked = '';
                            }
                            tmp += "<tr><td style='display: none;' id='entity_id_v'>"+data[i].entity_id+"</td><td>"+data[i].meaning+"</td><td>"+data[i].entity_name+"</td><td align='right'>"+data[i].tax_reg_num+"</td><td align='center'><div style='cursor:default;' class='state icheckbox_square-green "+checked+"'></div></td><td align='center'><button class='btn btn-sm btn-outline btn-info btn-xs edit' title='Edit'><i class='fa fa-pencil-square-o fa-lg'></i></button><button class='btn btn-sm btn-outline btn-info btn-xs view' title='View'><i class='fa fa-file-text-o fa-lg'></i></button></td></tr>";
                            count++;
                        });
                        $('#result_entity').html(tmp);
                        notifymsg('success','<b>Success</b>: '+count+' Result(s) Found.');
                        if('<?php echo $this->session->userdata("read_only") ?>' == 'Y'){
                            $('.fa-pencil-square-o').parent('button').remove();
                            $('.fa-times').parent('button').remove();
                        }
                        if('<?php echo $this->session->userdata("update") ?>' == 'N'){
                            $('.fa-pencil-square-o').parent('button').remove();
                        }
                        if('<?php echo $this->session->userdata("delete") ?>' == 'N'){
                            $('.fa-times').parent('button').remove();
                        }
                    }
                },
                complete: function() {
                    $("#search_entity").removeAttr("disabled");
                    $('#loading-icon-search').hide();
                },
                beforeSend: function(){
                    $("#search_entity").attr("disabled", true);
                    $('#loading-icon-search').show();
                }
            });
         });

    });
</script>